---
title: "Progress"
description: "The Progress component allows you to view the progress of any activity."
---

import {progressContent} from "@/content/components/progress";

# Progress

The Progress component allows you to view the progress of any activity.

<ComponentLinks component="progress" reactAriaHook="useProgressBar" />

---

<CarbonAd/>

## Installation

<PackageManagers
  showGlobalInstallWarning
  commands={{
    cli: "npx heroui-cli@latest add progress",
    npm: "npm install @heroui/progress",
    yarn: "yarn add @heroui/progress",
    pnpm: "pnpm add @heroui/progress",
    bun: "bun add @heroui/progress"
  }}
/>

## Import

<ImportTabs
  commands={{
    main: 'import {Progress} from "@heroui/react";',
    individual: 'import {Progress} from "@heroui/progress";',
  }}
/>

## Usage

<CodeDemo title="Usage" files={progressContent.usage} />

> **Note**: Make sure to pass the `aria-label` prop when the `label` prop is not provided. This is required for accessibility.

### Sizes

<CodeDemo title="Sizes" files={progressContent.sizes} />

### Colors

<CodeDemo title="Colors" files={progressContent.colors} />

### Indeterminate

You can use the `isIndeterminate` prop to display an indeterminate progress bar.
This is useful when you don't know how long an operation will take.

<CodeDemo title="Indeterminate" highlightedLines={7} files={progressContent.indeterminate} />

### Striped

<CodeDemo title="Striped" highlightedLines={6} files={progressContent.striped} />

### With Label

<CodeDemo title="With Label" files={progressContent.label} />

> **Note**: If you pass the `label` prop you don't need to pass `aria-label` prop anymore.

### With Value

<CodeDemo title="With Value" files={progressContent.value} />

### Value Formatting

Values are formatted as a percentage by default, but this can be modified by using the
`formatOptions` prop to specify a different format. `formatOptions` is compatible with the
option parameter of [Intl.NumberFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) and is applied based on the current locale.

<CodeDemo title="Value Formatting" files={progressContent.valueFormatting} highlightedLines="10" />

## Slots

- **base**: The base slot of the progress, it is the main container.
- **labelWrapper**: The label and value label wrapper.
- **label**: The label of the progress.
- **value**: The value label of the progress.
- **track**: The track is the background bar of the progress.
- **indicator**: The indicator is the bar that is filled according to the `value`.

### Custom Styles

You can customize the `Progress` component by passing custom Tailwind CSS classes to the component slots.

<CodeDemo title="Custom Styles" files={progressContent.customStyles} highlightedLines="9-13" />

<Spacer y={4} />

## Data Attributes

`CircularProgress` has the following attributes on the `base` element:

- **data-indeterminate**:
  Indicates whether the progress is indeterminate.
- **data-disabled**:
  Indicates whether the progress is disabled. Based on `isDisabled` prop.

<Spacer y={4} />

## Accessibility

- Exposed to assistive technology as a progress bar via ARIA.
- Labeling support for accessibility.
- Internationalized number formatting as a percentage or value.
- Determinate and indeterminate progress support.
- Exposes the `aria-valuenow`, `aria-valuemin`, `aria-valuemax` and `aria-valuetext` attributes.

<Spacer y={4} />

## API

### Progress Props

<APITable
  data={[
    {
      attribute: "label",
      type: "ReactNode",
      description: "The content to display as the label.",
      default: "-"
    },
    {
      attribute: "size",
      type: "sm | md | lg",
      description: "The size of the indicator.",
      default: "md"
    },
    {
      attribute: "color",
      type: "default | primary | secondary | success | warning | danger",
      description: "The color of the indicator.",
      default: "primary"
    },
    {
      attribute: "radius",
      type: "none | sm | md | lg | full",
      description: "The progress border radius.",
      default: "full"
    },
    {
      attribute: "value",
      type: "number",
      description: "The current value (controlled).",
      default: "-"
    },
    {
      attribute: "valueLabel",
      type: "ReactNode",
      description: "The content to display as the value's label (e.g. 1 of 4).",
      default: "-"
    },
    {
      attribute: "minValue",
      type: "number",
      description: "The smallest value allowed for the input.",
      default: "0"
    },
    {
      attribute: "maxValue",
      type: "number",
      description: "The largest value allowed for the input.",
      default: "100"
    },
    {
      attribute: "formatOptions",
      type: "Intl.NumberFormat",
      description: "The options to format the value.",
      default: "{style: 'percent'}"
    },
    {
      attribute: "isIndeterminate",
      type: "boolean",
      description: "Whether the progress is indeterminate.",
      default: "false"
    },
    {
      attribute: "isStriped",
      type: "boolean",
      description: "Whether the progress is striped.",
      default: "false"
    },
    {
      attribute: "showValueLabel",
      type: "boolean",
      description: "Whether to show the value label.",
      default: "true"
    },
    {
      attribute: "isDisabled",
      type: "boolean",
      description: "Whether the progress is disabled.",
      default: "false"
    },
    {
      attribute: "disableAnimation",
      type: "boolean",
      description: "Whether to disable the animation.",
      default: "false"
    },
    {
      attribute: "classNames",
      type: "Partial<Record<'base' | 'labelWrapper' | 'label' | 'track' | 'value' | 'indicator', string>>",
      description: "Allows to set custom class names for the progress slots.",
      default: "-"
    }
  ]}
/>
